<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
    <meta name="Keywords" content=""/>
    <meta name="description" content=""/>
    <link type="image/x-icon" href="" rel="shortcut icon">
    <link rel="stylesheet" href="css/bootstrap.css">
    <style>
        .al {display: block;margin: 80px auto 0;border-radius: 8px;height:120px;width: 240px;background-color: #ff6a48;color: #fff;text-align: center;line-height: 120px;font-size: 28px;}
    </style>
    <style>
        /* 以下为弹窗样式 */
        .modal-class-mb {
            margin-bottom: 15px;
        }
        .modal-class-view  {
            height: auto;
            width: 100%;
            max-height: 480px;
            text-align: center;
        }
        .modal-class-view img {
            display: inline-block;
            height: auto;
            max-height: 100%;
            width: auto;
            max-width: 100%
        }
        .modal-class-property {
            line-height: 30px;
        }
    </style>
</head>
<body>
<span id="al" class="al">点我</span>

<div class="modal fade" id="setClassModal" role="dialog" aria-labelledby="modalLabel" tabindex="-1">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="modalLabel">
                        编辑书单样式
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-xs-12">
                                <h5>样式预览&nbsp;<span>新样式1</span></h5>
                            </div>
                        </div>  
                        <div class="row">
                            <div class="col-xs-5">
                                <div class="modal-class-view">
                                    <img src="https://gss0.bdstatic.com/70cFfyinKgQIm2_p8IuM_a/daf/pic/item/72f082025aafa40f12647690a064034f79f019d8.jpg" alt="">
                                </div>
                            </div>
                            <div class="col-xs-7">
                                <div class="row modal-class-mb">
                                    <div class="col-xs-3">
                                        <div class="modal-class-property">内间距</div>
                                    </div>
                                    <div class="col-xs-3">
                                        <div class="btn-group modal-class-select">
                                            <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <span class="modal-class-select-name">请选择间距</span> <span class="caret"></span>
                                            </button>
                                            <ul class="dropdown-menu">
                                                <li data-value="2"><a href="javascript:void(0);">大间距</a></li>
                                                <li data-value="1"><a href="javascript:void(0);">小间距</a></li>
                                                <li data-value="0"><a href="javascript:void(0);">无间距</a></li>
                                            </ul>
                                            <input name="jianju1" type="hidden" value="">
                                        </div>
                                    </div>
                                    <div class="col-xs-3">
                                        <div class="modal-class-property">外间距</div>
                                    </div>
                                    <div class="col-xs-3">
                                        <div class="btn-group modal-class-select">
                                            <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <span class="modal-class-select-name">请选择间距</span> <span class="caret"></span>
                                            </button>
                                            <ul class="dropdown-menu">
                                                <li data-value="2"><a href="javascript:void(0);">大间距</a></li>
                                                <li data-value="1"><a href="javascript:void(0);">小间距</a></li>
                                                <li data-value="0"><a href="javascript:void(0);">无间距</a></li>
                                            </ul>
                                            <input name="jianju2" type="hidden" value="">
                                        </div>
                                    </div>
                                </div>
                                <div class="row modal-class-mb">
                                    <div class="col-xs-3">
                                        <div class="modal-class-property">图片比例</div>
                                    </div>
                                    <div class="col-xs-9">
                                        <div class="btn-group btn-block modal-class-select">
                                            <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <span class="modal-class-select-name">请选择图片比例</span> <span class="caret"></span>
                                            </button>
                                            <ul class="dropdown-menu">
                                                <li data-value="16:7"><a href="javascript:void(0);">16:7</a></li>
                                                <li data-value="16:8"><a href="javascript:void(0);">16:8</a></li>
                                                <li data-value="16:9"><a href="javascript:void(0);">16:9</a></li>
                                            </ul>
                                            <input name="size" type="hidden" value="">
                                        </div>
                                    </div>
                                </div>
                                <div class="row modal-class-mb">
                                    <div class="col-xs-3">
                                        <div class="modal-class-property">详细信息</div>
                                    </div>
                                    <div class="col-xs-9">
                                        <div class="btn-group btn-block modal-class-select">
                                            <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <span class="modal-class-select-name">请选择漫画信息展示方式</span> <span class="caret"></span>
                                            </button>
                                            <ul class="dropdown-menu">
                                                <li data-value="4"><a href="javascript:void(0);">都不显示（只保留漫画名）</a></li>
                                                <li data-value="3"><a href="javascript:void(0);">只显示悬浮在封面图上的信息</a></li>
                                                <li data-value="2"><a href="javascript:void(0);">只显示封面下面的内容</a></li>
                                                <li data-value="1"><a href="javascript:void(0);">全部显示</a></li>
                                            </ul>
                                            <input name="show" type="hidden" value="">
                                        </div>
                                    </div>
                                </div>
                                <div class="row modal-class-mb">
                                    <div class="col-xs-3">
                                        <div class="modal-class-property modal-class-select">排列方式</div>
                                    </div>
                                    <div class="col-xs-9">
                                        <div class="btn-group btn-block modal-class-select">
                                            <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <span class="modal-class-select-name">请选择排序方式</span> <span class="caret"></span>
                                            </button>
                                            <ul class="dropdown-menu">
                                                <li data-value="5"><a href="javascript:void(0);">按排序值</a></li>
                                                <li data-value="4"><a href="javascript:void(0);">按总人气</a></li>
                                                <li data-value="3"><a href="javascript:void(0);">按评分由高到低</a></li>
                                                <li data-value="2"><a href="javascript:void(0);">按更新时间（最近更新在最前</a></li>
                                                <li data-value="1"><a href="javascript:void(0);">随机</a></li>
                                            </ul>
                                            <input name="order" type="hidden" value="">
                                        </div>
                                    </div>
                                </div>
                                <div class="row modal-class-mb">
                                    <div class="col-xs-12">
                                        <div class="checkbox">
                                            <label>
                                                <input name="change" value="" type="checkbox"> 换一换 （至少12部漫画生效） 
                                            </label>
                                            <a href="">去添加>></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="pull-right">
                        <div class="btn btn-default" data-dismiss="modal" aria-label="Close">取消</div>
                        <div id="sub" data-dismiss="modal" class="btn btn-primary">保存</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script>
$(function(){
    $("#al").on('click',function(){
        $("#setClassModal").modal("show");
    })
    $("#sub").on('click',function(){
        alert(JSON.stringify(getAllControlData("setClassModal")))
    })

    /*以下为modal动态效果js*/
    var lsSelect = $('.modal-class-select').find('.dropdown-menu li');
    lsSelect.on('click',function(e){ //赋予类似select点击效果
        var _t = $(this);
        var wrap = _t.parents('.modal-class-select');
        var nameSpan = wrap.find('.modal-class-select-name');
        var input = wrap.find('input[type="hidden"]');
        var val = _t.data('value');
        var text = _t.text();
        _t.addClass('active');
        lsSelect.removeClass('active');
        nameSpan.text(text);
        input.val(val);
    });
    /*主动搜集所有数据*/
    function getAllControlData(modalId){
        var obj = {};
        var md = $("#"+modalId);
        if(md.length){
            md.find('input,select,textarea').each(function(){
                var _t=$(this);
                var _name=_t.attr('name')
                var _val=_t.attr('value')
                if(_name){
                    obj[_name]=_val||''
                }
            })
        }
        return obj
    }
})
</script>
</body>
</html>